<!-- 我的列表组件 -->
<template>
<div>
  <div class="no-data" v-if="listDatas.length==0">
    <i class="iconfont icon-null"></i>
    <div>这里什么都没有</div>
  </div>
  <scroller lock-x height="-62" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-else>
  <div>
    <div class="list-card-box">
      <div class="list-card" v-for="(item , index) in listDatas" @click="goDetail(item.guid, item.todotype, item.bizdataguid ,item.datastatus, item.floworganiserid, index)">
        <div class="statLabel hasReject" v-if="item.bizresult && item.bizresult == 'N'"></div>
        <div class="statLabel hasReject" v-if="item.rejectinfo"></div>
        <div class="list-card-top displayflex">
          <div class="flex1">{{item.applicant}}</div>
          <i class="iconfont icon-meeting" v-if="item.classify == '会议'"></i>
          <i class="iconfont icon-education" v-if="item.classify == '培训/开会'"></i>
          <i class="iconfont icon-product" v-if="item.classify == '客户项目/BD'"></i>
          <i class="iconfont icon-overtime" v-if="item.classify == '加班'"></i>
          <i class="iconfont icon-qingjia" v-if="item.classify == '请假'"></i>
          <i class="iconfont icon-outgoing" v-if="item.classify == '外出'"></i>
          <i class="iconfont icon-travel" v-if="item.classify == '差旅报销'"></i> 
          <i class="iconfont icon-trip" v-if="item.classify == '出差'"></i>
          <div>{{item.classify}}</div>
        </div>
        <div class="ctx">{{item.deptname}}</div>
        <div class="time displayflex">
          <div class="flex1">{{item.begindate}}<template v-if="item.enddate"> 至 {{item.enddate}}</template>
          </div>
          <div class="date" v-if="item.classify == '差旅报销' && item.dealt != '1'">{{item.totalexpense}}元</div>
          <div class="date" v-else-if="item.dayestimate">{{item.dayestimate}}天</div>
        </div>
        <div class="list-card-link red">
           <em v-if="item.dealt == '1' && item.status == '5'"
               class="green">已处理</em>
           <em v-else-if="item.dealt == '1' && item.status == '2'">待处理</em>
              <em v-else-if="item.classify == '外出'"
               :class="{'green':item.datastatus=='4'}">{{item.datastatus | egressDataStatus}}</em>
             <em v-else-if="item.classify == '请假'"
               :class="{'green':item.datastatus=='6'}">{{item.datastatus | overtimeDataStatus}}</em>
           <em v-else-if="item.classify == '加班'"
               :class="{'green':item.datastatus=='6'}">{{item.datastatus | overtimeDataStatus}}</em>
           <em v-else-if="item.classify == '差旅报销'"
               :class="{'green':item.datastatus=='8'}">{{item.datastatus | expenseAccountDataStatus}}</em>
           <em v-else :class="{'green':item.datastatus=='7'}">{{item.datastatus | bizTripDataStatus}}</em>
           <div class="icon"><em class="txt">》</em></div>
        </div>
      </div>
    </div>
    <p class="txt-bottom" v-if="totalLength == listDatas.length"><em class="txt">我是有底线的</em></p>
  </div>
  </scroller>
</div>
</template>

<script>
export default {
  props:['url','listDatas','totalLength'],
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    listDatas(val){
      console.log(val);
      this.count = 0;
    }
  },
  computed: {
    userInfo(){
      return localStorage.UserInfo?JSON.parse(localStorage.UserInfo):'';
    }
  },
  created() {
    
  },
  methods: {
    goDetail(id,type,biz,state,floworganiserid,indexNum){
      let _this = this;
      console.log(this.listDatas);
      // console.log(id,type,biz,state);
      //如果是我的待办，id传的不同传biz,state==1表示加班出差报销列表待处理订单跳转表单
      if(state=='1' && this.listDatas[0].classify == '差旅报销'){
        this.$router.push({
          path:'/reimbursement/form',
          query:{
            guid:id
          }
        });
        return false;
      }else if(state=='1' && this.listDatas[0].classify == '加班'){
        this.$router.push({
          path:'/workOvertime/form',
          query:{
            guid:id
          }
        });
        return false;
      }else if(state=='1' && this.listDatas[0].classify == '请假'){
        this.$router.push({
          path:'/leave/form',
          query:{
            guid:id
          }
        });
        return false;
      }else if(state=='1' && this.listDatas[0].classify == '外出'){
        this.$router.push({
          path:'/egress/form',
          query:{
            guid:id
          }
        });
        return false;
      }else if(state=='1'){
        this.$router.push({
          path:'/businessTrip/form',
          query:{
            guid:id
          }
        });
        return false;
      };
      //我的待办列表有todotype参数名，加班出差差旅没有
      //表示我的待办的页面跳转对应表单页进行修改
      let userid = (this.userInfo.staffid == floworganiserid)
      if(type && userid  && type=='1'){
        this.$router.push({
          path:'/businessTrip/form',
          query:{
            guid:biz
          }
        });
        return false;
      }
      if(type && userid  && type=='2'){
        this.$router.push({
          path:'/workOvertime/form',
          query:{
            guid:biz
          }
        });
        return false;
      }
      if(type && userid  && type=='3'){
        this.$router.push({
          path:'/reimbursement/form',
          query:{
            guid:biz
          }
        });
        return false;
      }
       if(type && userid  && type=='4'){
        this.$router.push({
          path:'/leave/form',
          query:{
            guid:biz
          }
        });
        return false;
      }
       if(type && userid  && type=='5'){
        this.$router.push({
          path:'/egress/form',
          query:{
            guid:biz
          }
        });
        return false;
      }
      //表示我的待办的页面跳转详情页
      if(type){
        this.$router.push({
          path:_this.url,
          query:{
            indexNum:indexNum,
            guid:id,
            bizdataguid:biz,
            type:type//待办类型（1-出差申请 2-加班申请  3-差旅报销申请 4-请假申请）
          }
        })
      }else{
        this.$router.push({
          path:_this.url,
          query:{
            guid:id,
          }
        })
      }
      
    },
    onScrollBottom() {
      this.count++;
      
      if (this.count == 1 && this.totalLength > this.listDatas.length) {
        this.$emit('changePage');
      }
    },
  }
};
</script>